<script setup lang="ts"></script>

<template>
  <el-dialog
    v-bind="$attrs"
    destroy-on-close
    append-to-body
    top="5vh"
    width="80vw"
    modal
    body-class="dialog-body"
    class="dialog-wrapper"
    style="height: calc(100vh - var(--el-dialog-margin-top) * 3)"
  >
    <template #header>
      <slot name="header" />
    </template>

    <div class="dialog-content">
      <slot />
    </div>

    <template #footer>
      <slot name="footer" />
    </template>
  </el-dialog>
</template>
<style lang="scss">
.dialog-wrapper {
  height: calc(100vh - var(--el-dialog-margin-top) * 3);
  display: flex;
  flex-direction: column;
  .el-dialog__header {
    height: 3rem;
    flex-shrink: 0;
  }

  .el-dialog__footer {
    height: 3rem;
    flex-shrink: 0;
  }
}

.dialog-body {
  flex: 1;
}

.dialog-content {
  height: 100%;
  display: flex;
}
</style>
